<!-- 我的列表 -->

<template>
  <div class="MonitorList SensorIndoor-MyTable">
    <div>
      <div v-for="item in list" :key="item.id" class="MonitorList-item">
        <div
          class="MonitorList-item-panel"
          :class="{ 'MonitorList-item-panel-alarm': item.gzzt.value === 1 }"
          @click="openNewOneShow(item)"
        >
          <div>{{ item.deviceName }}</div>

          <div>
            <b>{{ item.temperature }}</b>
            <span>℃</span>
          </div>

          <div>
            <div class="half">
              <span><img :src="imgs.pm" /></span>{{ item.pm }}
            </div>
            <div class="half">
              <span><img :src="imgs.carbon2" /></span>{{ item.carbon2 }}mmp
            </div>
            <div class="half">
              <span><img :src="imgs.humidity" /></span>{{ item.humidity }}%
            </div>
            <div class="half">
              <span><img :src="imgs.carbon" /></span>{{ item.carbon }}mmp
            </div>
          </div>
        </div>
      </div>

      <el-empty v-if="isEmpty" :description="`暂无${MAP.WORD}`" />

      <WebTable :elPageProps="MAP[`PAGE_${INIT_PARAM.pageSize}`]" noTable />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTable',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 图片对象
     */
    imgs() {
      const getImg = (name) => CORE.common(`monitor/11/${name}.png`)
      return {
        pm: getImg('pm'),
        humidity: getImg('humidity'),
        carbon2: getImg('carbon2'),
        carbon: getImg('carbon'),
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
